<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Typed Tree</title>

    <script type="text/javascript" src="jquery.js"></script>

    <style type="text/css">
        a.test {
            font-weight: bold;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function()
        {

            var ws;

            if ( "WebSocket" in window )
            {
                debug("Horray you have web sockets Trying to connect...");
                ws = new WebSocket("ws://localhost:8080/jwebsocket/typedtree.xhtml");

                ws.onopen = function()
                {
                    // Web Socket is connected. You can send data by send() method.
                    debug("connected...");
                    //ws.send("hello from the browser");
                };

                run = function()
                {
                    var val = $("#i1").val(); // read the entry
                    $("#i1").val("");       // and clear it
                    ws.send(val);           // tell the socket
                    return true;            // must do this
                };

                ws.onmessage = function ( evt )
                {
                    var data = evt.data;
                    debug(data);
                };

                ws.onclose = function()
                {
                    debug(" socket closed");
                };
            }
            else
            {
                alert("You have no web sockets");
            }
            ;

            function debug( str )
            {
                $("#debug").text(str);
            }
            ;


        });
    </script>
</head>
<body>

<h1>Typed Tree</h1>

<fieldset>
<legend>typed tree</legend>
<p>>> <input id="i1" onchange="run()" size ="42"/></p>
<div id="debug"></div>
</fieldset>

</body>
</html>
        
        
        